<script setup lang="ts">
	import carousel from '@/views/plugin/dashboard/assets/images/carousel.jpg'

	const cardLoading = ref(false)

	interface DataItem {
		title: string
	}

	const data: DataItem[] = [
		{
			title: '炎黄应当推出模型'
		},
		{
			title: '炎黄应当推出模型炎黄应当推出模型'
		},
		{
			title: '炎黄应当推出模型会发给大家'
		},
		{
			title: '炎黄应当推出模型更不符合开了个反炎黄应当推出模型更不符合开了个反馈回来官方馈回来官方'
		}
	]
	const onChange = (current: number) => {
	}
</script>

<template>
	<a-card :bordered="false" :loading="cardLoading">
		<h4>图文列表</h4>
		<a-divider />
		<a-row class="h-[500px]">
			<a-col :span="12">
				<a-carousel :after-change="onChange" autoplay>
					<a-image class="w-full" :src="carousel" :preview="false"></a-image>
					<div><h3>2</h3></div>
					<div><h3>3</h3></div>
					<div><h3>4</h3></div>
				</a-carousel>
			</a-col>
			<a-col :span="12">
				<a-list item-layout="horizontal" :data-source="data">
					<template #renderItem="{ item }">
						<a-list-item>
							<a-list-item-meta>
								<template #title>
									<div class="flex items-center">
										<div class="px-2 bg-[#c6daf5] text-[#1677ff] rounded-[5px] mr-2 flex-shrink-0">通知</div>
										<div class="omit cursor-pointer" :title="item.title">{{ item.title }}</div>
									</div>
								</template>
								<template #description>
									<div
										class="omit cursor-pointer"
										title="是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。"
									>
										是我们前端开发中的一个常见需求，在项目开发中，在项在项目开发中目开发中在项目开发中在项目开发中我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。
									</div>
								</template>
							</a-list-item-meta>
						</a-list-item>
					</template>
				</a-list>
			</a-col>
		</a-row>
	</a-card>
</template>

<style scoped lang="less">
	:deep(.ant-divider-horizontal) {
		margin-top: 10px;
	}

	.omit {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	:deep(.slick-slide) {
		text-align: center;
		background: #364d79;
		overflow: hidden;
		height: 500px;
	}

	:deep(.slick-slide h3) {
		color: #fff;
	}

	:deep(.ant-image) {
		width: 100%;
		height: 500px;
	}

	:deep(.ant-image-img) {
		height: 500px;
	}
</style>
